CSS loogilised omadused: rahvusvahelise paigutuse toe revolutsioon

Veeb on globaalne platvorm, mis teenindab kasutajaid, kes räägivad erinevaid keeli ja loevad erinevates suundades. Traditsioonilised CSS-i omadused, nagu left, right, top ja bottom, on oma olemuselt füüsilised, seotud ekraani orientatsiooniga. See tekitab väljakutseid paigutuste loomisel, mis kohanduvad erinevate kirjutamisviisidega, nagu paremalt-vasakule (RTL) keeled nagu araabia ja heebrea keel, või vertikaalsed kirjutamisviisid, mida kasutatakse mõnes Ida-Aasia keeles. Siin tulevad mängu CSS-i loogilised omadused: võimas omaduste komplekt, mis on loodud nende väljakutsete lahendamiseks ja tõeliselt rahvusvahelistatud veebipaigutuste loomise lihtsustamiseks.

Mis on CSS-i loogilised omadused?

CSS-i loogilised omadused asendavad füüsilised omadused loogilistega. Selle asemel, et tugineda fikseeritud suundadele, kirjeldavad nad paigutust sisu voo kaudu. See tähendab, et määratlete stiile rea alguse ja lõpu või ploki ja rea suundade alusel, selle asemel, et tugineda absoluutsetele left, right, top ja bottom väärtustele. Seejärel kaardistab brauser need loogilised omadused automaatselt vastavatele füüsilistele omadustele, lähtudes kirjutamisviisist ja suunast.

Mõelge sellele nii: selle asemel, et öelda "paiguta see element 10 piksli kaugusele ekraani vasakust servast", ütlete "paiguta see element 10 piksli kaugusele sisuvoo algusest". Brauser haldab, kas algus on vasakul või paremal, sõltuvalt keelest ja kirjutamisviisist.

Peamised kontseptsioonid: rea- ja plokisuunad

Rea ja ploki suundade mõistmine on loogiliste omaduste tõhusaks kasutamiseks ülioluline.

• Reasuund: see on suund, milles tekst voolab reas. Vasakult paremale (LTR) keeltes on reasuund horisontaalne, vasakult paremale. Paremalt vasakule (RTL) keeltes on reasuund samuti horisontaalne, kuid paremalt vasakule. Vertikaalsetes kirjutamisviisides on reasuund vertikaalne.
• Plokisuund: see on suund, milles tekstiplokid (nagu lõigud) on virnastatud. Enamikus keeltes on plokisuund vertikaalne, ülalt alla. Kuid mõnes vertikaalses kirjutamisviisis võib plokisuund olla horisontaalne.

Levinud loogilised omadused ja nende ekvivalendid

Siin on tabel, mis näitab mõningaid kõige sagedamini kasutatavaid loogilisi omadusi ja nende füüsilisi ekvivalente, sõltuvalt kirjutamisviisist ja suunast:

Oluline märkus: See tabel illustreerib üldist kontseptsiooni. Tegelik kaardistamine sõltub konkreetsest kirjutamisviisist ja suuna seadetest.

Loogiliste omaduste praktilised näited

Vaatame mõningaid praktilisi näiteid, kuidas saate loogilisi omadusi oma CSS-is kasutada.

Näide 1: Navigatsiooniriba stiilimine

Kujutage ette, et loote navigatsiooniriba, mis peab kohanema nii LTR- kui ka RTL-keeltega. Loogiliste omaduste abil saate määratleda polsterduse ja veerised viisil, mis automaatselt kohandub õige suunaga.

            
.nav-item {
  padding-inline-start: 1em; /* Ekvivalentne padding-left LTR-is, padding-right RTL-is */
  padding-inline-end: 1em;   /* Ekvivalentne padding-right LTR-is, padding-left RTL-is */
}

.nav-list {
  margin-inline-start: auto; /* Joondab algusesse nii LTR-is kui ka RTL-is */
  margin-inline-end: 0;
}

            

              
                Copy
              
            
          

Selles näites rakendavad padding-inline-start ja padding-inline-end automaatselt õige polsterduse, lähtudes teksti suunast. Sarnaselt lükkab margin-inline-start: auto navigeerimise konteineri algusesse, olenemata sellest, kas see on LTR või RTL.

Näide 2: Vestlusliidese stiilimine

Vestlusliideses soovite sageli kuvada erinevate kasutajate sõnumeid ekraani vastaskülgedel. Loogilised omadused võivad seda palju lihtsamaks muuta.

            
.message.user-1 {
  margin-inline-start: auto; /* Lükka kasutaja 1 sõnumid lõppu (paremale LTR-is, vasakule RTL-is) */
  text-align: inline-end;     /* Joonda tekst lõppu */
}

.message.user-2 {
  margin-inline-end: auto;   /* Lükka kasutaja 2 sõnumid algusesse (vasakule LTR-is, paremale RTL-is) */
  text-align: inline-start;   /* Joonda tekst algusesse */
}

            

              
                Copy
              
            
          

Siin lükkab margin-inline-start: auto sõnumid user-1-lt konteineri lõppu ja margin-inline-end: auto lükkab sõnumid user-2-lt algusesse. Omadus text-align kasutab ka loogilisi väärtusi, et tagada teksti õige joondamine.

Näide 3: Kaardi paigutuse loomine äärtega

Kaardi paigutuse loomisel võiksite lisada iga kaardi algusesse ääre. Loogiliste omaduste abil kuvatakse ääris automaatselt õigel küljel, olenemata keelest.

            
.card {
  border-inline-start: 2px solid #000;
  padding: 1em;
}

            

              
                Copy
              
            
          

See lihtne CSS-i reegel tagab, et äär on alati olemas kaardi sisuvoo alguses, olenemata sellest, kas teksti loetakse vasakult paremale või paremalt vasakule.

Kirjutamisviisid ja suund

Loogiliste omaduste täielikuks kasutamiseks peate mõistma, kuidas seada omadusi writing-mode ja direction. Need omadused kontrollivad teksti voo suunda ja paigutuse orientatsiooni.

• writing-mode: see omadus määrab, kas tekstiread paigutatakse horisontaalselt või vertikaalselt. Levinud väärtused on järgmised:
• horizontal-tb: horisontaalne, ülalt alla (vaikimisi enamiku keelte jaoks)
• vertical-rl: vertikaalne, paremalt vasakule (levinud Ida-Aasia keeltes)
• vertical-lr: vertikaalne, vasakult paremale
• direction: see omadus määrab teksti suuna reas. Levinud väärtused on järgmised:
• ltr: vasakult paremale (vaikimisi keelte jaoks nagu inglise, hispaania, prantsuse keel)
• rtl: paremalt vasakule (kasutatakse keelte jaoks nagu araabia, heebrea, pärsia keel)

Siin on näide, kuidas kasutada neid omadusi araabia keele paigutuse loomiseks:

            
body {
  direction: rtl;
  font-family: Arial, sans-serif; /* Veenduge, et araabia keele jaoks kasutatakse õiget fonti */
}

            

              
                Copy
              
            
          

Omaduse direction: rtl seadmine elemendil body pöörab paigutuse paremalt vasakule, tagades, et kõik loogilised omadused tõlgendatakse araabia teksti jaoks õigesti. Samuti võiksite määrata araabia teksti jaoks sobiva fondi, nagu Arial, mis toetab araabia tähti.

Loogiliste omaduste kasutamise eelised

CSS-i loogiliste omaduste kasutamisel on mitmeid olulisi eeliseid:

• Lihtsustatud rahvusvahelistamine: loogilised omadused lihtsustavad drastiliselt erinevate kirjutamisviiside ja suundadega kohanduvate paigutuste loomise protsessi. Te ei pea enam kirjutama eraldi CSS-i reegleid LTR- ja RTL-paigutuste jaoks.
• Suurenenud koodi hooldatavus: loogiliste omaduste abil saate vähendada CSS-i koodi hulka, mida peate kirjutama ja hooldama. See muudab teie koodibaasi puhtamaks, paremini organiseeritud ja lihtsamini mõistetavaks.
• Parem loetavus: loogilised omadused väljendavad teie paigutuse eesmärki selgemalt. Füüsiliste suundade määramise asemel kirjeldad paigutust sisuvoo kaudu, muutes koodi loetavamaks ja arusaadavamaks.
• Suurem paindlikkus: loogilised omadused pakuvad suuremat paindlikkust erinevate ekraanisuuruste ja seadmetega kohanduvate paigutuste kujundamisel.
• Tulevikukindlus: veebitehnoloogiate arenedes pakuvad loogilised omadused kindlama ja tulevikukindlama viisi paigutuste määratlemiseks, tagades, et teie kood töötab erinevates keskkondades jätkuvalt õigesti.

Brauseri tugi

Enamik kaasaegseid brausereid pakub CSS-i loogilistele omadustele suurepärast tuge, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea mõte kontrollida uusimat brauseri ühilduvuse teavet veebisaitidel nagu Can I use..., et tagada, et teie sihtrühm saaks teie paigutusi õigesti vaadata.

Loogiliste omaduste kasutamise parimad tavad

Siin on mõned parimad tavad, mida CSS-i loogiliste omaduste kasutamisel meeles pidada:

• Kasutage loogilisi omadusi järjepidevalt: kui olete alustanud loogiliste omaduste kasutamist, proovige neid oma projektis järjepidevalt kasutada. See muudab teie koodi ühtlasemaks ja hõlpsamini hooldatavaks.
• Testige põhjalikult: testige oma paigutusi erinevates kirjutamisviisides ja suundades, et tagada nende õige töö. Kasutage brauseri arendaja tööriistu arvutatud stiilide kontrollimiseks ja veendumaks, et loogilised omadused kaardistatakse õigetele füüsilistele omadustele.
• Pakkuge varukoopiaid (vajadusel): kui teil on vaja toetada vanemaid brausereid, mis ei toeta loogilisi omadusi, võite pakkuda varukoopiaid traditsiooniliste füüsiliste omaduste abil. Kuid pidage meeles, et see võib teie koodi keerulisemaks muuta.
• Võtke arvesse juurdepääsetavust: veenduge, et teie paigutused oleksid juurdepääsetavad puuetega kasutajatele. Kasutage sobivaid ARIA atribuute ja järgige juurdepääsetavuse juhiseid, et luua kaasavaid kujundusi.
• Kasutage CSS-i lähtestust: brauseritevaheliste ühilduvusprobleemide minimeerimiseks alustage CSS-i lähtestamisega, et normaliseerida erinevate elementide stiile.

Kokkuvõte

CSS-i loogilised omadused on võimas tööriist tõeliselt rahvusvahelistatud veebipaigutuste loomiseks. Neid omadusi kasutades saate oma koodi lihtsustada, hooldatavust parandada ja luua paigutusi, mis kohanduvad sujuvalt erinevate kirjutamisviiside ja suundadega, pakkudes globaalsele vaatajaskonnale paremat kasutuskogemust. Veebi arenedes muutuvad loogilised omadused üha olulisemaks juurdepääsetavate, kaasavate ja tulevikukindlate veebisaitide ja veebirakenduste loomisel.

Ärge kartke oma projektides loogiliste omadustega katsetada. Alustage väikeste muudatustega ja lisage need järk-järgult oma töövoogu. Eelised rahvusvahelistamise ja koodi hooldatavuse osas on pingutust väärt.

Lisamaterjalid

• MDN veebidokumendid: CSS-i loogilised omadused ja väärtused
• CSS-i loogilised omadused ja väärtused, tase 1
• Can I use... HTML5, CSS3 jne tugitabelid